<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<style>
    .box {
        display: flex;
        flex-wrap: wrap;
        justify-content: space-around;
        align-items: center;
    }
</style>

<body>
    <div class="box">

    </div>
</body>

</html>
<!-- <script src="./newData.js"></script> -->
<script src="./ES6-数据构造.js"></script>
<script>

    let set = new SetData()
    let arr = set.init() 
    // let json = JSON.stringify(arr)
    console.log(arr);
    /*
    Chidren: (3) [{…}, {…}, {…}]
   Props: {className: "ss-m", style: {…}}
   Tag: "div"
    */
    //通过面向对象 处理 数据
    class Being {
        constructor() {

        }
        setUp(name) { //创建dom节点
            this.dom = document.createElement(name)

        }
        setStyle(obj) { //添加样式 

            this.dom.className = obj.className || null;
            let obj2 = obj.style || null
            console.log(obj.style);
            for (const key in obj2) {
                switch (key) {
                    case "backgroundColor":
                        this.dom.style.backgroundColor = obj2[key]
                        // this.dom.style.backgroundColor = "red"
                        console.log(key, 489546546516);
                        ; break
                    case "color":
                        this.dom.style.color = obj2[key]
                            ; break
                    case "fontSize":
                        this.dom.style.fontSize = obj2[key] + "px"
                            ; break

                }


            }

        }

        setStr(str) {//添加文字

        }
        center(arr) {
            arr.array.forEach(item => {
                this.dom.innerHTML += item
            });
        }
        render(box, dom) {//渲染页面
            box.appendChild(dom)
        }

    }
    class Chidren extends Being {
        constructor(data) {
            super()
            this.data = data
            this.Dom = document.querySelector(".box")
            this.init(this.data)
        }
        init(data) {//入口函数
            //处理 数据
            data.forEach((item, i) => {
                for (const key in item) {
                    if (this.id === undefined || i > this.id) {
                        switch (key) {
                            case "Tag":
                                this.setUp(item[key])
                                console.log(item[key]);
                                ; break
                            case "Props":

                                this.setStyle(item[key])
                                    ; break
                            case "Chidren":
                                let arr = item[key]
                                //
                                this.render(this.Dom, this.dom)
                                let a = "." + this.dom.className
                                this.kom = document.querySelector(a)
                                console.log(this.kom, a);
                                Chidren.id = i
                                this.init(arr)
                                    ; break
                            case "Chidre":
                                this.dom.innerHTML = item[key] || ""
                                this.render(this.kom, this.dom)
                                    ; break
                        }

                        console.log(1);
                    }
                }
            });
        }
    }
    // let isData = new Chidren(arr)
    // let box = document.querySelector(".box")
    // let err = [...box.children]
    // err.forEach(item => {
    //     item.style.width = "200px"
    //     item.style.height = "200px"
    //     item.style.display = "flex"
    //     item.style.flexWrap = "wrap";
    //     item.style.justifyContent = "space-evenly";
    //     item.style.alignItems = "center";
    // })
</script>